<template>
    <div class="FormCustomView">
        <div class="FormCustomView-center" v-for="item in layout" :style="getStyle(item)" >
            <div class="FormCustomView-name" v-if="defConfName.contains(item.defConf) && item.config.showName">{{item.config.name}}</div>
            <form-custom-control :paramsCustom="paramsCustom" :item="item" :ref="item.id" :readonly="true"></form-custom-control>
        </div>
    </div>
</template>

<script>
import FormCustomControl from "./GridLayoutView/FormCustomControl.vue";
import FormCustomApi from "@/api/formCustom.js";
import formCustomViewEvent from "@/views/modules/form/FormCustomView/js/formCustomViewEvent.js";
export default {
    name: "FormCustomView",
    components: {
        FormCustomControl,
    },
    mixins:[formCustomViewEvent],
    data(){
        return{
            alias:'',
            layout:[],
            defConfName:['from','list'],
            paramsCustom:{},//外部传入的参数
        }
    },
    onLoad(option){
        let params = JSON.parse(option.params)
        this.alias = params.alias;
        this.paramsCustom = params.params;
        if(params.title){
        uni.setNavigationBarTitle({
            title: params.title
        });
        }
        this.init();
    },
    methods:{
        init(){
            let self = this;
            self.layout = [];
            FormCustomApi.getByAlias(this.alias).then(res => {
                let list = JSON.parse(res.json)
                list.forEach(res_=>{
                    if(res_.mobileShow){
                        self.layout.push(res_)
                }
                })
            })
        },
        getStyle(item){
            let style = {
                marginBottom:'1rem',
            }
            let list = ['chart','ureport']
            if(list.contains(item.defConf)){
                style['overflow'] = 'hidden'
                style['height'] = item.mobileH+'px'
            }
            return style
        }
    }
}
</script>

<style scoped>
.FormCustomView{
    height: 100%;
    overflow: auto;
}
.FormCustomView-name{
    font-size: 0.9rem;
    line-height: 2rem;
    padding-left: 1rem;
    background: white;
    border-bottom: 1px solid  #e8e8e8;
}
</style>
